<template>
    <article class="public-header-content">
        <div class="container">
            <div class="header">
                <i></i>贷款计算器
            </div>
            <a-row class="content clearfix" :gutter="30" type="flex" justify="center" style="margin: 0">
                <article class="NotLoggedIn-box" v-show="!isLoggedIn">
                    <img src="/static/img/NotLoggedIn-lock1.svg" alt="">
                    <p>更多信息请您 <a @click="cellLogin">登录</a> 后查看</p>
                </article>
                <a-col :span="12" class="left-box">
                    <h3>房屋总价：{{isNull0_USD(getHousePrice)}}</h3>
                    <article>
                        <aside>
                            <h5 class="left">首付（$）</h5>
                            <div class="right">
                                <a-input-number v-model="downPaymentPrice" prefix="iconfont icon-dkw_daikuan-" disabled></a-input-number>
                            </div>
                        </aside>
                        <aside>
                            <h5 class="left">首付百分比（%）</h5>
                            <div class="right">
                                <a-tooltip placement="top" title="最低为1%，最大为99%">
                                    <a-input-number v-model.number="downPaymentPercentage" @change="downPaymentPercentageChange" :min="1" :max="99" :step="0.25" prefix="iconfont icon-baifenbi"></a-input-number>
                                </a-tooltip>
                            </div>
                        </aside>
                        <aside>
                            <h5 class="left">年利率（%）</h5>
                            <div class="right">
                                <a-tooltip placement="top" title="最低为1%，最大为99%">
                                    <a-input-number v-model.number="AnnualInterestRate" @change="AnnualInterestRateChange" :min="1" :max="99" :step="0.25" prefix="iconfont icon-icon_lishuaipeizhi"></a-input-number>
                                </a-tooltip>
                            </div>
                        </aside>
                        <aside>
                            <h5 class="left">贷款计划</h5>
                            <div class="right">
                                <a-select v-model="loanPlan" allowClear showSearch placeholder="请选择贷款计划" @change="loanPlanChange" style="width: 100%;" >
                                    <a-select-option value="30">30年固定利率(360期)</a-select-option>
                                    <a-select-option value="20">20年固定利率(240期)</a-select-option>
                                    <a-select-option value="15">15年固定利率(180期)</a-select-option>
                                </a-select>
                            </div>
                        </aside>
                    </article>
                </a-col>
                <a-col :span="12" class="right-box">
                    <h3>每月还贷总支出：{{isNull0_USD(monthlyLoanTotalSpending)}}</h3>
                    <div class="chart-div" id="BarChart-Monthly-repayment-chart"></div>
                </a-col>
            </a-row>
        </div>

        <!--公共登录modal框-->
        <loginModal ref="loginModal" @cellRegisterSon="cellRegisterSon"></loginModal>
        <!--公共注册modal框-->
        <registerModal ref="registerModal" @cellLoginSon="cellLoginSon"></registerModal>

        <p v-show="false">{{getEstateHouseDetails}}</p>

    </article>
</template>

<script>
    import loginModal from '../../components/login.vue';//公共登录modal框
    import registerModal from '../../components/register.vue';//公共注册modal框

    export default {
        data() {
            return {
                isLoggedIn: false,//用户是否登录

                myEcharts: '',
                downPaymentPrice: 0,    //首付款价钱
                AnnualInterestRate: 4.85,   //银行贷款年利率
                loanPlan: '30', //贷款计划

                downPaymentPercentage: 20,  //首付款比例
                propertyTaxRate: 1.1,   //房产税年利率
                PropertyManagementFee: 0,   //物业费

                loanPrice: 0,           //贷款额 = 房屋总价 - 首付款
                monthlyInterestRate: 0, //银行贷款月利率 = 银行贷款年利率 /100 / 12个月
                monthsNumber: 0,        //还款月数 = 选择的贷款计划的年数 * 12个月

                monthlyRepayment: 0,            //每月还款本息(月供) = 贷款额 * 银行贷款月利率 * (1+银行贷款月利率)^n / [(1+银行贷款月利率)^n - 1]
                monthlyPropertyTaxes: 0,        //每月房产税 = 房价 * (房产税年利率/100) / 12个月
                monthlyLoanTotalSpending: 0,    //每月还贷总支出 = 每月还款本息(月供) + 每月房产税
            }
        },
        computed: {
            //从state获取房源价钱数据
            getHousePrice() {
                if(this.$store.getters.get_housePrice){
                    this.get_loancalc();
                }
                return this.$store.getters.get_housePrice
            },
            //从state获取新房详情数据
            getEstateHouseDetails() {
                if(this.$store.getters.get_EstateHouseDetails){
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_EstateHouseDetails).length != 0){
                        //延时1s，否则会造成死循环，或者其他报错
                        this.$nextTick(() => {
                            //判断首付款比例downPayment是否为null
                            if(this.$store.getters.get_EstateHouseDetails.downPayment != null){
                                this.downPaymentPercentage = this.$store.getters.get_EstateHouseDetails.downPayment
                            }
                            //判断房产税年利率propertyTax是否为null
                            if(this.$store.getters.get_EstateHouseDetails.propertyTax != null){
                                this.propertyTaxRate = this.$store.getters.get_EstateHouseDetails.propertyTax
                            }
                            //判断物业费propertyFee是否为null
                            if(this.$store.getters.get_EstateHouseDetails.propertyFee != null){
                                this.PropertyManagementFee = this.$store.getters.get_EstateHouseDetails.propertyFee
                            }
                            //判断银行贷款年利率apr是否为null
                            if(this.$store.getters.get_EstateHouseDetails.apr != null){
                                this.AnnualInterestRate = this.$store.getters.get_EstateHouseDetails.apr
                            }
                        })
                    }
                }
                return this.$store.getters.get_EstateHouseDetails;
            },
        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('BarChart-Monthly-repayment-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });
            //判断用户是否登录
            if(this.$store.getters.get_user.name != '' && this.$store.getters.get_user.headPhoto != ''){
                this.isLoggedIn = true;
            }else{
                this.isLoggedIn = false;
            }

        },
        methods: {
            get_loancalc() {
                this.$nextTick(() => {
                    // console.log(this.downPaymentPercentage, this.propertyTaxRate, this.PropertyManagementFee);

                    // 计算首付款价钱
                    this.downPaymentPrice = Math.round(this.getHousePrice * (parseFloat(this.downPaymentPercentage) / 100));
                    // 计算贷款额
                    this.loanPrice = Math.round(this.getHousePrice - this.downPaymentPrice);
                    // 计算月利率
                    this.monthlyInterestRate = parseFloat(this.AnnualInterestRate) / 100 / 12;
                    // 计算还款月数
                    this.monthsNumber = parseFloat(this.loanPlan) * 12;
                    // 计算每月房产税
                    this.monthlyPropertyTaxes = Math.round(this.getHousePrice * (this.propertyTaxRate / 100) / 12);
                    // 计算每月还款本息(月供)
                    this.monthlyRepayment = Math.round(this.loanPrice * this.monthlyInterestRate * Math.pow(1 + this.monthlyInterestRate, this.monthsNumber) / (Math.pow(1 + this.monthlyInterestRate, this.monthsNumber) - 1));
                    // 计算每月还贷总支出
                    this.monthlyLoanTotalSpending = this.monthlyRepayment + this.monthlyPropertyTaxes + this.PropertyManagementFee;

                    // console.log(this.getHousePrice, '房源价钱')
                    // console.log(this.downPaymentPrice, '计算首付款的值')
                    // console.log(this.loanPrice, '计算贷款额')
                    // console.log(this.monthlyInterestRate, '计算月利率')
                    // console.log(this.monthsNumber, '计算还款月数')
                    // console.log(this.monthlyRepayment, '计算每月还款本息(月供)')
                    // console.log(this.monthlyPropertyTaxes, '计算每月房产税')
                    // console.log(this.monthlyLoanTotalSpending, '计算每月还贷总支出')

                    this.monthlyLoanTotalSpending_charts(this.monthlyRepayment, this.monthlyPropertyTaxes, this.PropertyManagementFee)
                });

            },
            // 首付百分比改变，并计算首付款价钱
            downPaymentPercentageChange(value){
                // 计算首付款价钱
                // this.downPaymentPrice = Math.round(this.getHousePrice * (parseFloat(value) / 100));
                this.get_loancalc()
            },
            // 年利率改变
            AnnualInterestRateChange(value){
                // 计算月利率
                // this.monthlyInterestRate = parseFloat(value) / 100 / 12;
                this.get_loancalc()
            },
            //贷款计划变化
            loanPlanChange(value) {
                // 计算还款月数
                // this.monthsNumber = parseFloat(value) * 12;
                this.get_loancalc()
            },
            //每月还贷总支出——饼图
            monthlyLoanTotalSpending_charts(monthlyRepayment, monthlyPropertyTaxes, PropertyManagementFee){
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    legend: {
                        orient: 'vertical',
                        right: '30',
                        top: '30',
                        data: ['还贷本息（月供）', '房产税', '物业费']
                    },
                    series: [{
                        type: 'pie',
                        radius: ['25%', '65%'],//圆的内外半径
                        center: ['45%', '55%'],//圆的X,Y轴平移
                        data: [
                            {
                                value: monthlyRepayment,
                                name: '还贷本息（月供）',
                                itemStyle: {//圆形颜色
                                    normal: {color: '#00b8ee'}
                                }
                            },
                            {
                                value: monthlyPropertyTaxes,
                                name: '房产税',
                                itemStyle: {
                                    normal: {color: '#fe9e25'}
                                }
                            },
                            {
                                value: PropertyManagementFee,
                                name: '物业费',
                                itemStyle: {
                                    normal: {color: '#8fc320'}
                                }
                            },
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                formatter: param => {
                                    return param.name + '：' + this.$accounting.formatMoney(param.value, '$', 0);
                                },
                            }
                        }
                    }]
                });
            },
            //触发显示登录框
            cellLogin(){
                this.$refs.loginModal.$emit('handleLoginModal');
            },
            //触发显示注册框
            cellRegister(){
                this.$refs.registerModal.$emit('handleRegisterModal');
            },
            // register子组件中触发本父组件方法cellLoginSon，以调用登录modal框
            cellLoginSon(){
                this.$refs.loginModal.$emit('handleLoginModal');
            },
            // login子组件中触发本父组件方法cellRegisterSon，以调用注册modal框
            cellRegisterSon(){
                this.$refs.registerModal.$emit('handleRegisterModal');
            },

        },
        components: {
            loginModal,
            registerModal,
        }
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        .public-header-content {
            margin: 50px 0;
            border-radius: 5px;
            overflow: hidden;
            >.container {
                background: #fff;
                > .header {
                    font-size: 20px;
                    color: #000;
                    text-indent: 20px;
                    padding: 15px 0;
                    border-bottom: 1px solid #e5e5e7;
                    > i {
                        width: 5px;
                        height: 26px;
                        float: left;
                        background: #00b6ef;
                    }
                }
                > .content {
                    width: 100%;
                    padding: 40px 0;
                    position: relative;
                    display: table;
                    >.NotLoggedIn-box{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        /*display: flex;*/
                        /*display: -webkit-flex;*/
                        /*align-items: center;*/
                        /*justify-content: center;*/

                        display: table-cell;
                        vertical-align: middle;

                        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 60%);
                        background-color: rgba(255, 255, 255, .7);
                        z-index: 9;
                        >img{
                            display: inline-block;
                            width: 120px;
                            margin: 100px 0 0 0;
                        }
                        >p{
                            display: block;
                            font-size: 16px;
                            >a{
                                color: #00b8ee;
                            }
                        }
                    }
                    >.left-box{
                        >h3{
                            font-size: 20px;
                            color: #000;
                            text-align: center;
                            margin: 0 0 30px 0;
                        }
                        >article{
                            width: 100%;
                            border: 1px solid #dfe3e6;
                            margin-top: 30px;
                            >aside{
                                width: 100%;
                                height: 60px;
                                line-height: 60px;
                                border-bottom: 1px solid #dfe3e6;
                                overflow: hidden;
                                >h5{
                                    width: 25%;
                                    font-size: 15px;
                                    color: #000;
                                    text-align: center;
                                    border-right: 1px solid #dfe3e6;
                                }
                                >div.right{
                                    text-align: center;
                                    width: 75%;
                                    position: relative;
                                    padding: 0 30px;
                                    >div{
                                        width: 100%;
                                        text-indent: 10px;
                                    }
                                }
                            }
                            >aside:last-of-type{
                                border: none;
                            }
                        }
                    }
                    >.right-box{
                        position: relative;
                        >h3{
                            font-size: 20px;
                            color: #000;
                            text-align: center;
                            margin: 0 0 30px 0;
                        }
                        >p{
                            font-size: 14px;
                            color: #000;
                            text-align: center;
                            margin-top: 4px;
                        }
                        >div.chart-div{
                            width: 100%;
                            height: 250px;
                        }
                    }
                }
            }
        }
    }
</style>
